<template>
    <el-tooltip
        :content="tooltipContent"
        placement="top-start"
        show-after="500"
        hide-after="0"
    >
      <div
          class="signal-circle"
          :class="signalClass">
        {{ signalText }}
      </div>
    </el-tooltip>
</template>

<script setup>
import {computed} from 'vue'

const props = defineProps({
  type: {
    type: String,
    required: true,
    validator: (value) => ['temp', 'all', 'single'].includes(value)
  },
  fileName: {
    type: String,
    required: true
  }
})

const signalClass = computed(() => {
  switch (props.type) {
    case 'temp':
      return 'temp'
    case 'all':
      return 'all'
    case 'single':
      return 'single'
    default:
      return ''
  }
})

const signalText = computed(() => {
  switch (props.type) {
    case 'temp':
      return 'T'
    case 'all':
      return 'A'
    case 'single':
      return 'S'
    default:
      return ''
  }
})

const tooltipContent = props.fileName;
</script>

<style scoped>
.signal-circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
  border: 1px solid black;
  position: relative;
}

.signal-circle.temp {
  background-color: blue;
}

.signal-circle.all {
  background-color: red;
}

.signal-circle.single {
  background-color: green;
}
</style>
